<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UC-CW-001：课件列表管理原型</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: #fff;
            padding: 16px 24px;
            border-bottom: 1px solid #e8e8e8;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }
        
        .breadcrumb a {
            color: #1890ff;
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        
        .main-content {
            padding: 24px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .filter-section {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .filter-row {
            display: flex;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .filter-item label {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }
        
        .filter-item select,
        .filter-item input {
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            min-width: 150px;
        }
        
        .filter-item select:focus,
        .filter-item input:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        .search-box {
            position: relative;
            min-width: 300px;
        }
        
        .search-box input {
            padding-right: 40px;
        }
        
        .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        .action-section {
            background: #fff;
            padding: 16px 20px;
            border-radius: 8px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .action-buttons {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .btn {
            padding: 8px 16px;
            border: 1px solid;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-default {
            background: #fff;
            border-color: #d9d9d9;
            color: #333;
        }
        
        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .btn-danger {
            background: #fff;
            border-color: #ff4d4f;
            color: #ff4d4f;
        }
        
        .btn-danger:hover {
            background: #ff4d4f;
            color: #fff;
        }
        
        .btn-success {
            background: #fff;
            border-color: #52c41a;
            color: #52c41a;
        }
        
        .btn-success:hover {
            background: #52c41a;
            color: #fff;
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .table-container {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .table th {
            background: #fafafa;
            padding: 16px 12px;
            text-align: left;
            font-weight: 600;
            color: #333;
            border-bottom: 1px solid #e8e8e8;
            position: relative;
        }
        
        .table th.sortable {
            cursor: pointer;
            user-select: none;
        }
        
        .table th.sortable:hover {
            background: #f0f0f0;
        }
        
        .sort-icon {
            margin-left: 4px;
            color: #999;
        }
        
        .table td {
            padding: 16px 12px;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }
        
        .table tbody tr:hover {
            background: #fafafa;
        }
        
        .checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        
        .courseware-name {
            color: #1890ff;
            cursor: pointer;
            font-weight: 500;
        }
        
        .courseware-name:hover {
            text-decoration: underline;
        }
        
        .status-tag {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-draft {
            background: #fff7e6;
            color: #faad14;
            border: 1px solid #ffd591;
        }
        
        .status-published {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        
        .status-archived {
            background: #f5f5f5;
            color: #8c8c8c;
            border: 1px solid #d9d9d9;
        }
        
        .action-links {
            display: flex;
            gap: 8px;
        }
        
        .action-link {
            color: #1890ff;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;
        }
        
        .action-link:hover {
            text-decoration: underline;
        }
        
        .action-link.danger {
            color: #ff4d4f;
        }
        
        .action-link.success {
            color: #52c41a;
        }
        
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background: #fafafa;
            border-top: 1px solid #e8e8e8;
        }
        
        .pagination-info {
            color: #666;
            font-size: 14px;
        }
        
        .pagination-controls {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .page-btn {
            padding: 4px 8px;
            border: 1px solid #d9d9d9;
            background: #fff;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .page-btn:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .page-btn.active {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }
        
        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        
        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 16px;
            color: #d9d9d9;
        }
        
        .loading-state {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }
        
        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #1890ff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }
        
        .modal-close:hover {
            color: #333;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .filter-row {
                flex-direction: column;
                align-items: stretch;
            }
            
            .filter-item {
                width: 100%;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
            
            .table-container {
                overflow-x: auto;
            }
            
            .table {
                min-width: 800px;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <div class="header">
        <div class="breadcrumb">
            <a href="#">首页</a> > <a href="#">课件管理</a> > 课件列表
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 筛选区域 -->
        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-item">
                    <label>工站</label>
                    <select>
                        <option value="">请选择工站</option>
                        <option value="stage_001">装配工站</option>
                        <option value="stage_002">测试工站</option>
                        <option value="stage_003">包装工站</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>机种</label>
                    <select>
                        <option value="">请选择机种</option>
                        <option value="process_001">iPhone组装</option>
                        <option value="process_002">iPad组装</option>
                        <option value="process_003">MacBook组装</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>状态</label>
                    <select>
                        <option value="">全部状态</option>
                        <option value="draft">草稿</option>
                        <option value="published">已发布</option>
                        <option value="archived">已归档</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>搜索</label>
                    <div class="search-box">
                        <input type="text" placeholder="请输入课件名称或描述">
                        <span class="search-icon">🔍</span>
                    </div>
                </div>
                <div class="filter-item">
                    <label>&nbsp;</label>
                    <div style="display: flex; gap: 8px;">
                        <button class="btn btn-primary">搜索</button>
                        <button class="btn btn-default">重置</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作区域 -->
        <div class="action-section">
            <div class="action-buttons">
                <button class="btn btn-primary">➕ 新建课件</button>
                <button class="btn btn-default">📤 导入</button>
                <button class="btn btn-default">📥 导出</button>
                <button class="btn btn-danger" disabled>🗑️ 批量删除</button>
                <button class="btn btn-success" disabled>✅ 批量发布</button>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 60px;">
                            <input type="checkbox" class="checkbox" id="selectAll">
                        </th>
                        <th class="sortable" style="width: 200px;">
                            课件名称 <span class="sort-icon">↕️</span>
                        </th>
                        <th class="sortable" style="width: 80px;">
                            版本 <span class="sort-icon">↕️</span>
                        </th>
                        <th class="sortable" style="width: 120px;">
                            工站 <span class="sort-icon">↕️</span>
                        </th>
                        <th class="sortable" style="width: 120px;">
                            机种 <span class="sort-icon">↕️</span>
                        </th>
                        <th class="sortable" style="width: 100px;">
                            状态 <span class="sort-icon">↕️</span>
                        </th>
                        <th class="sortable" style="width: 150px;">
                            创建时间 <span class="sort-icon">↕️</span>
                        </th>
                        <th class="sortable" style="width: 150px;">
                            更新时间 <span class="sort-icon">↕️</span>
                        </th>
                        <th style="width: 150px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" class="checkbox"></td>
                        <td>
                            <span class="courseware-name" onclick="showCoursewareDetail('cw_001')">
                                基础操作培训
                            </span>
                        </td>
                        <td>v1.0</td>
                        <td>装配工站</td>
                        <td>iPhone组装</td>
                        <td><span class="status-tag status-published">已发布</span></td>
                        <td>2024-05-15 10:00</td>
                        <td>2024-05-15 15:30</td>
                        <td>
                            <div class="action-links">
                                <a href="#" class="action-link">编辑</a>
                                <a href="#" class="action-link success">取消发布</a>
                                <a href="#" class="action-link danger">删除</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="checkbox"></td>
                        <td>
                            <span class="courseware-name" onclick="showCoursewareDetail('cw_002')">
                                安全操作培训
                            </span>
                        </td>
                        <td>v1.1</td>
                        <td>测试工站</td>
                        <td>iPad组装</td>
                        <td><span class="status-tag status-draft">草稿</span></td>
                        <td>2024-05-15 11:00</td>
                        <td>2024-05-15 16:00</td>
                        <td>
                            <div class="action-links">
                                <a href="#" class="action-link">编辑</a>
                                <a href="#" class="action-link success">发布</a>
                                <a href="#" class="action-link danger">删除</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="checkbox"></td>
                        <td>
                            <span class="courseware-name" onclick="showCoursewareDetail('cw_003')">
                                设备维护培训
                            </span>
                        </td>
                        <td>v2.0</td>
                        <td>包装工站</td>
                        <td>MacBook组装</td>
                        <td><span class="status-tag status-archived">已归档</span></td>
                        <td>2024-05-14 09:00</td>
                        <td>2024-05-14 14:00</td>
                        <td>
                            <div class="action-links">
                                <a href="#" class="action-link">编辑</a>
                                <a href="#" class="action-link">恢复</a>
                                <a href="#" class="action-link danger">删除</a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页 -->
            <div class="pagination">
                <div class="pagination-info">
                    共 100 条记录，第 1 页/共 5 页
                </div>
                <div class="pagination-controls">
                    <button class="page-btn" disabled>上一页</button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <button class="page-btn">4</button>
                    <button class="page-btn">5</button>
                    <button class="page-btn">下一页</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 课件详情弹窗 -->
    <div class="modal" id="coursewareDetailModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">课件详情 - 基础操作培训</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 16px;">
                    <strong>课件名称：</strong>基础操作培训<br>
                    <strong>版本号：</strong>v1.0<br>
                    <strong>所属工站：</strong>装配工站<br>
                    <strong>所属机种：</strong>iPhone组装<br>
                    <strong>状态：</strong><span class="status-tag status-published">已发布</span><br>
                    <strong>创建时间：</strong>2024-05-15 10:00:00<br>
                    <strong>更新时间：</strong>2024-05-15 15:30:00<br>
                    <strong>创建人：</strong>张三<br>
                    <strong>查看次数：</strong>150次
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">关闭</button>
                <button class="btn btn-primary">编辑</button>
                <button class="btn btn-default">预览</button>
                <button class="btn btn-default">复制</button>
            </div>
        </div>
    </div>

    <script>
        // 全选功能
        document.getElementById('selectAll').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBatchButtons();
        });

        // 单个选择功能
        document.querySelectorAll('tbody input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                updateBatchButtons();
                updateSelectAll();
            });
        });

        // 更新批量操作按钮状态
        function updateBatchButtons() {
            const checkedBoxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
            const batchButtons = document.querySelectorAll('.btn-danger, .btn-success');
            batchButtons.forEach(btn => {
                btn.disabled = checkedBoxes.length === 0;
            });
        }

        // 更新全选状态
        function updateSelectAll() {
            const allCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');
            const checkedBoxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
            const selectAllCheckbox = document.getElementById('selectAll');
            
            if (checkedBoxes.length === 0) {
                selectAllCheckbox.indeterminate = false;
                selectAllCheckbox.checked = false;
            } else if (checkedBoxes.length === allCheckboxes.length) {
                selectAllCheckbox.indeterminate = false;
                selectAllCheckbox.checked = true;
            } else {
                selectAllCheckbox.indeterminate = true;
            }
        }

        // 显示课件详情
        function showCoursewareDetail(coursewareId) {
            document.getElementById('coursewareDetailModal').style.display = 'flex';
        }

        // 关闭弹窗
        function closeModal() {
            document.getElementById('coursewareDetailModal').style.display = 'none';
        }

        // 点击弹窗外部关闭
        document.getElementById('coursewareDetailModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // 排序功能
        document.querySelectorAll('.sortable').forEach(header => {
            header.addEventListener('click', function() {
                // 这里可以添加排序逻辑
                console.log('排序:', this.textContent.trim());
            });
        });

        // 搜索功能
        document.querySelector('.search-box input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                console.log('搜索:', this.value);
            }
        });

        // 筛选功能
        document.querySelectorAll('.filter-section select').forEach(select => {
            select.addEventListener('change', function() {
                console.log('筛选:', this.previousElementSibling.textContent, this.value);
            });
        });
    </script>
</body>
</html>

